<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
			<el-form ref="fakeuserDialogRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="state.ruleForm.username" placeholder="请输入用户名" clearable></el-input>
				</el-form-item>
				<el-form-item label="用户昵称" prop="nickname">
					<el-input v-model="state.ruleForm.nickname" placeholder="请输入用户昵称" clearable></el-input>
				</el-form-item>
				<el-form-item label="用户头像" prop="avatar">
					<div class="image">
						<el-image v-if="state.ruleForm.avatar != ''" :src="STATIC_URL + state.ruleForm.avatar" fit="cover" class="image" />
						<el-icon v-else @click="choiceFileImage">
							<ele-Plus />
						</el-icon>
						<div class="image-delete" @click="deleteImage" v-if="state.ruleForm.avatar != ''">
							<SvgIcon name="ele-DeleteFilled"></SvgIcon>
						</div>
					</div>
				</el-form-item>

				<el-form-item label="用户email" prop="email">
					<el-input v-model="state.ruleForm.email" placeholder="请输入用户email" clearable></el-input>
				</el-form-item>
				<el-form-item label="用户手机号" prop="mobile">
					<el-input v-model="state.ruleForm.mobile" placeholder="请输入用户手机号" clearable></el-input>
				</el-form-item>
				<el-form-item label="用户性别" prop="gender">
					<el-radio-group v-model="state.ruleForm.gender">
						<el-radio label="male">男</el-radio>
						<el-radio label="female">女</el-radio>
						<el-radio label="unkown">未知</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(fakeuserDialogRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFileImageDate"></FileChoice>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { type FormInstance, type FormRules } from 'element-plus';
import { dataFakeUserApi } from '/@/api/shop/data/fakeuser/index';
import messageUtils from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();
const emit = defineEmits(['refresh']);
const fakeuserDialogRef = ref();
const state = reactive({
	ruleForm: {
		id: '',
		username: '',
		nickname: '',
		email: '',
		mobile: '',
		gender: 'male',
		avatar: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const rules = reactive<FormRules>({
	activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
	activityTime: [{ required: true, message: '请选择活动时间 ', trigger: 'blur' }],
});
const onCancel = () => {
	closeDialog();
};

const closeDialog = () => {
	console.log('关闭窗口');
	state.dialog.isShowDialog = false;
	fakeuserDialogRef.value.resetFields();
};

const openDialog = async (type: string, id: string) => {
	state.dialog.isShowDialog = true;
	if (type === 'edit') {
		state.dialog.title = '新增虚拟用户';
		state.dialog.type = 'edit';
		state.dialog.submitTxt = '新增';
		const { data } = await dataFakeUserApi().view(id);
		state.ruleForm = data;
	} else {
		state.dialog.title = '修改虚拟用户';
		state.dialog.type = 'add';
		state.dialog.submitTxt = '修改';
	}
	state.dialog.isShowDialog = true;
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				if ('edit' == state.dialog.type) {
					await dataFakeUserApi().update(state.ruleForm);
				} else {
					await dataFakeUserApi().create(state.ruleForm);
				}
				emit('refresh');
				messageUtils().success('操作成功');
				onCancel();
			} catch (e) {
				messageUtils().error('操作失败，请重试');
			}
		}
	});
};

const choiceFileImage = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFileImageDate = (choiceFileImages: ChoiceFileInfo[]) => {
	console.log('choices: ', choiceFileImages[0]);
	state.ruleForm.avatar = choiceFileImages[0].visitRelativePath;
};

const deleteImage = () => {
	state.ruleForm.avatar = '';
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border: 1px dashed var(--el-border-color-darker);
	position: relative;
}

.image:hover .image-delete {
	display: flex;
}
</style>
